<template>
    <div class="box">
        <div class="top_box">   
            <!-- 最上面的数据 -->
            <div class="top_box_box">
                <p class="number_box">200W</p>
                <p>营业额</p>
            </div>
            <div class="top_box_box">
                <p class="number_middle_box">200W</p>
                <p>营业额</p>
            </div>
            <div class="top_box_box">
                <p class="number_middle_box">200W</p>
                <p>营业额</p>
            </div>
            <div class="top_box_box">
                <p class="number_box">200W</p>
                <p>营业额</p>
            </div>
        </div>
        <div class="bottom_box">
            <!-- 下面的可视化图表 -->
             <div class="bottom_box_box" id="zz"></div>
             <div class="bottom_box_box" id="zx"></div>
             <div class="bottom_box_box" id="bt"></div>
             <div class="bottom_box_box" id="ld"></div>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default{
        mounted(){
            this.btInit();
            this.zxInit();
            this.ldInit();
            this.zzInit();
        },
        methods:{
            ldInit(){
                var chartDom = document.getElementById('ld');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                title: {
                    text: '雷达图'
                },
                legend: {
                    data: ['Allocated Budget', 'Actual Spending']
                },
                radar: {
                    // shape: 'circle',
                    indicator: [
                    { name: 'Sales', max: 6500 },
                    { name: 'Administration', max: 16000 },
                    { name: 'Information Technology', max: 30000 },
                    { name: 'Customer Support', max: 38000 },
                    { name: 'Development', max: 52000 },
                    { name: 'Marketing', max: 25000 }
                    ]
                },
                series: [
                    {
                    name: 'Budget vs spending',
                    type: 'radar',
                    data: [
                        {
                        value: [4200, 3000, 20000, 35000, 50000, 18000],
                        name: 'Allocated Budget'
                        },
                        {
                        value: [5000, 14000, 28000, 26000, 42000, 21000],
                        name: 'Actual Spending'
                        }
                    ]
                    }
                ]
                };

                option && myChart.setOption(option);
            },
            zzInit(){
                // 柱状图
                var chartDom = document.getElementById('zz');
                var myChart = echarts.init(chartDom);
                var option;

                let xAxisData = [];
                let data1 = [];
                let data2 = [];
                let data3 = [];
                let data4 = [];
                for (let i = 0; i < 10; i++) {
                xAxisData.push('Class' + i);
                data1.push(+(Math.random() * 2).toFixed(2));
                data2.push(+(Math.random() * 5).toFixed(2));
                data3.push(+(Math.random() + 0.3).toFixed(2));
                data4.push(+Math.random().toFixed(2));
                }
                var emphasisStyle = {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0,0,0,0.3)'
                }
                };
                option = {
                title: {
                    text: '工资'
                },
                legend: {
                    data: ['bar', 'bar2', 'bar3', 'bar4'],
                    left: '10%'
                },
                brush: {
                    toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
                    xAxisIndex: 0
                },
                toolbox: {
                    feature: {
                    magicType: {
                        type: ['stack']
                    },
                    dataView: {}
                    }
                },
                tooltip: {},
                xAxis: {
                    data: xAxisData,
                    name: 'X Axis',
                    axisLine: { onZero: true },
                    splitLine: { show: false },
                    splitArea: { show: false }
                },
                yAxis: {},
                grid: {
                    bottom: 100
                },
                series: [
                    {
                    name: 'bar',
                    type: 'bar',
                    stack: 'one',
                    emphasis: emphasisStyle,
                    data: data1
                    },
                    {
                    name: 'bar2',
                    type: 'bar',
                    stack: 'one',
                    emphasis: emphasisStyle,
                    data: data2
                    },
                    {
                    name: 'bar3',
                    type: 'bar',
                    stack: 'two',
                    emphasis: emphasisStyle,
                    data: data3
                    },
                    {
                    name: 'bar4',
                    type: 'bar',
                    stack: 'two',
                    emphasis: emphasisStyle,
                    data: data4
                    }
                ]
                };
                myChart.on('brushSelected', function (params) {
                var brushed = [];
                var brushComponent = params.batch[0];
                for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
                    var rawIndices = brushComponent.selected[sIdx].dataIndex;
                    brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
                }
                myChart.setOption({
                    title: {
                    backgroundColor: '#333',
                    text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
                    bottom: 0,
                    right: '10%',
                    width: 100,
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    }
                    }
                });
                });

                option && myChart.setOption(option);

            },
            zxInit(){  
                // 折线图初始化
                var chartDom = document.getElementById('zx');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                title: {
                    text: '公司业绩'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                    }
                },
                legend: {
                    width: 300,
                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                series: [
                    {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
                };
                option && myChart.setOption(option);
            },
            btInit(){
                var chartDom = document.getElementById('bt');
                var myChart = echarts.init(chartDom);
                var option;

                const data = genData(50);
                option = {
                title: {
                    text: '同名数量统计',
                    subtext: '纯属虚构',
                    
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: data.legendData
                },
                series: [
                    {
                    name: '姓名',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: data.seriesData,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
                };
                function genData(count) {
                // prettier-ignore
                const nameList = [
                        '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
                    ];
                const legendData = [];
                const seriesData = [];
                for (var i = 0; i < count; i++) {
                    var name =
                    Math.random() > 0.65
                        ? makeWord(4, 1) + '·' + makeWord(3, 0)
                        : makeWord(2, 1);
                    legendData.push(name);
                    seriesData.push({
                    name: name,
                    value: Math.round(Math.random() * 100000)
                    });
                }
                return {
                    legendData: legendData,
                    seriesData: seriesData
                };
                function makeWord(max, min) {
                    const nameLen = Math.ceil(Math.random() * max + min);
                    const name = [];
                    for (var i = 0; i < nameLen; i++) {
                    name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
                    }
                    return name.join('');
                }
                }

                option && myChart.setOption(option);
            }
        }
    }

</script>

<style lang="scss" scoped>
    .box{
        height: 100%;
        width: 100%;
        .top_box{
            border: 1px solid red; 
            height: 200px;
            width: 100%;
            display: flex;
            .top_box_box{
                border: 1px solid red; 
                flex: 1;
                text-align: center;
                align-items: center;
                line-height: 50px;
                p{
                    height: 20px;
                }
                .number_box{
                    font-size: 25px;
                    font-weight: bold;
                }
                .number_middle_box{
                    font-size: 35px;
                    font-weight: bold;
                }
            }
        }
        .bottom_box{
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
            border: 1px solid red; 
            height: 80%;
            .bottom_box_box{
                border: 1px solid black; 
                width: 49%;
                height: 50%;

            }
        }
    }

</style>